//一旦进入到页面就会请求后台数据
axios.defaults.baseURL = 'http://ajax-api.itheima.net'
window.onload = async function () {
  try {
    const { data: res } = await axios({
      url: '/dashboard',
      method: 'get',
    })
    console.log(res)

    const {
      data: { overview },
    } = res

    for (let key in overview) {
      document.querySelector(`span[name=${key}]`).innerHTML = overview[key]
    }

    line1(res.data.year)
    line2(res.data.salaryData)
    line3(res.data.groupData)
    console.log(res.data.groupData)
    line4(res.data.provinceData)
    line5(res.data.salaryData)
  } catch (error) {
    console.log(error)
  }

  function line1(data) {
    var chartDom = document.getElementById('line')
    var myChart = echarts.init(chartDom)
    option = {
      xAxis: {
        type: 'category',
        data: data.map((item) => item.month),
      },
      yAxis: {
        type: 'value',
        //分隔线的样式
        splitLine: {
          lineStyle: {
            type: 'dashed',
          },
        },
      },

      tooltip: {
        trigger: 'axis',
      },
      color: {
        type: 'linear',
        x: 0,
        y: 1,
        x2: 0,
        y2: 0,
        colorStops: [
          {
            offset: 0,
            color: 'red', // 0% 处的颜色
          },
          {
            offset: 1,
            color: 'blue', // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
      series: [
        {
          data: data.map((item) => item.salary),
          type: 'line',
          smooth: true,
          lineStyle: {
            width: 6,
          },
          //标记的大小
          symbolSize: 10,
          //设置区域的渐变颜色
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#499FEE',
              },
              {
                offset: 0.8,
                color: 'rgba(255,255,255,0.2)',
              },
              {
                offset: 1,
                color: 'rgba(255,255,255,0)',
              },
            ]),
          },
        },
      ],
    }

    option && myChart.setOption(option)
  }

  function line2(data) {
    var chartDom = document.getElementById('salary')
    var myChart = echarts.init(chartDom)
    option = {
      title: {
        text: '班级薪资分布',
        top: 15,
        left: 10,
        textStyle: {
          fontSize: 16,
        },
      },
      label: {
        show: true,
        position: 'outside',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        bottom: '9%',
        left: 'center',
      },
      labelLine: {
        show: true,
      },
      color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
      series: [
        {
          name: '班级薪资分布',
          //设置图标样式
          type: 'pie',
          //半径:radius
          radius: ['50%', '64%'],
          //中心点坐标
          center: ['50%', '45%'],
          //区域样式
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2,
          },
          //文本
          label: {
            show: false,
            position: 'center',
          },
          //刻度线
          labelLine: {
            show: false,
          },
          data: data.map((item) => {
            return {
              name: item.label,
              value: item.b_count + item.g_count,
            }
          }),
        },
      ],
    }

    option && myChart.setOption(option)
  }

  function line3(data) {
    var chartDom = document.getElementById('lines')
    var myChart = echarts.init(chartDom)
    option = {
      grid: {
        left: 70,
        top: 30,
        right: 30,
        bottom: 50,
      },
      xAxis: {
        type: 'category',
        data: data[1].map((item) => item.name),
        axisLine: {
          lineStyle: {
            color: '#ccc',
            type: 'dashed',
          },
        },
        axisLabel: {
          color: '#999',
        },
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed',
          },
        },
      },
      tooltip: {
        trigger: 'item',
      },
      color: [
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#34D39A', // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(52,211,154,0.2)', // 100% 处的颜色
            },
          ],
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#499FEE', // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(73,159,238,0.2)', // 100% 处的颜色
            },
          ],
        },
      ],
      series: [
        {
          data: data[1].map((item) => item.hope_salary),
          type: 'bar',
          name: '期望薪资',
        },
        {
          data: data[1].map((item) => item.salary),
          type: 'bar',
          name: '就业薪资',
        },
      ],
    }
    option && myChart.setOption(option)
    const btns = document.querySelector('#btns')
    btns.addEventListener('click', function (e) {
      e.preventDefault()
      if (e.target.tagName === 'BUTTON') {
        document.querySelector('.btn-blue').classList.remove('btn-blue')
        e.target.classList.add('btn-blue')
        let groupNumber = e.target.innerHTML.trim()
        option.xAxis.data = data[groupNumber].map((item) => item.name)
        option.series[0].data = data[groupNumber].map(
          (item) => item.hope_salary
        )
        option.series[1].data = data[groupNumber].map((item) => item.salary)
        myChart.setOption(option)
      }
    })
  }

  function line4(dataa) {
    const myEchart = echarts.init(document.querySelector('#map'))
    const data2 = JSON.stringify(dataa)
      .replace(/省/g, '')
      .replace(/自治区/g, '')
      .replace(/壮族/g, '')
      .replace(/回族/g, '')
      .replace(/维吾尔/g, '')
    const data3 = JSON.parse(data2)

    const dataList = [
      { name: '南海诸岛', value: 0 },
      { name: '北京', value: 0 },
      { name: '天津', value: 0 },
      { name: '上海', value: 0 },
      { name: '重庆', value: 0 },
      { name: '河北', value: 0 },
      { name: '河南', value: 0 },
      { name: '云南', value: 0 },
      { name: '辽宁', value: 0 },
      { name: '黑龙江', value: 0 },
      { name: '湖南', value: 0 },
      { name: '安徽', value: 0 },
      { name: '山东', value: 0 },
      { name: '新疆', value: 0 },
      { name: '江苏', value: 0 },
      { name: '浙江', value: 0 },
      { name: '江西', value: 0 },
      { name: '湖北', value: 0 },
      { name: '广西', value: 0 },
      { name: '甘肃', value: 0 },
      { name: '山西', value: 0 },
      { name: '内蒙古', value: 0 },
      { name: '陕西', value: 0 },
      { name: '吉林', value: 0 },
      { name: '福建', value: 0 },
      { name: '贵州', value: 0 },
      { name: '广东', value: 0 },
      { name: '青海', value: 0 },
      { name: '西藏', value: 0 },
      { name: '四川', value: 0 },
      { name: '宁夏', value: 0 },
      { name: '海南', value: 0 },
      { name: '台湾', value: 0 },
      { name: '香港', value: 0 },
      { name: '澳门', value: 0 },
    ]

    for (let i = 0; i < dataList.length; i++) {
      for (let j = 0; j < data3.length; j++) {
        if (dataList[i].name === data3[j].name) {
          dataList[i].value = data3[j].value
        }
      }
    }

    // #############################################################################################################
    /* dataList.forEach((item) => {
      const obj = data.find((it) =>it.name.replace(/省|回族自治区|吾尔自治区|壮族自治区|特别行政区|自治区/g,'') === item.name);
      if (obj) item.value = obj.value;
     }); */

    // #############################################################################################################
    /* const newDataList = dataList.map((item) => {
      return item.name;
     });
     let resNameList = dataArr.map((item) => {
      return item.name;
     });
     newDataList.map((item) => {
      if (!resNameList.includes(item)) {
       dataArr.push({ name: item, value: 0 });
      }
     }); */
    // #######################

    let option = {
      title: {
        text: '籍贯分布',
        top: 10,
        left: 10,
        textStyle: {
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: 'item',
        formatter: `{b}: {c} 位学员`,
        borderColor: 'transparent',
        backgroundColor: 'rgba(0,0,0,0.5)',
        textStyle: {
          color: '#fff',
        },
      },
      visualMap: {
        min: 0,
        max: 6,
        left: 'left',
        bottom: '20',
        text: ['6', '0'],
        inRange: {
          color: ['#ffffff', '#0075F0'],
        },
        show: true,
        left: 40,
      },
      geo: {
        map: 'china',
        roam: false,
        zoom: 1.0,
        label: {
          normal: {
            show: true,
            fontSize: '10',
            color: 'rgba(0,0,0,0.7)',
          },
        },
        itemStyle: {
          normal: {
            borderColor: 'rgba(0, 0, 0, 0.2)',
            color: '#e0ffff',
          },
          emphasis: {
            areaColor: '#34D39A',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
      series: [
        {
          name: '籍贯分布',
          type: 'map',
          geoIndex: 0,
          data: dataList,
        },
      ],
    }
    myEchart.setOption(option)
  }

  function line5(datab) {
    const chartDom = document.querySelector('#gender') //初始化图表
    const myChart = echarts.init(chartDom)

    myChart.setOption({
      title: [
        {
          text: '男女薪资分布',
          left: '5%',
          top: '5%',
          textStyle: {
            color: '#000',
            fontWeight: 'normal',
            fontSize: 20,
          },
        },
        {
          text: '男生',
          left: '42%',
          top: '45%',
          textStyle: {
            color: '#000',
            fontWeight: 'normal',
            fontSize: 20,
          },
        },
        {
          text: '女生',
          left: '42%',
          top: '90%',
          textStyle: {
            color: '#000',
            fontWeight: 'normal',
            fontSize: 20,
          },
        },
      ], //图表的图例
      tooltip: {
        trigger: 'item',
      },
      color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
      series: [
        {
          type: 'pie',
          radius: ['48%', '70%'],
          center: ['100%', '30%'],
          width: 150,
          avoidLabelOverlap: false,
          data: datab.map((item) => {
            return {
              value: item.b_count,
              name: item.label,
            }
          }),
        },
        {
          type: 'pie',
          radius: ['48%', '70%'],
          center: ['100%', '75%'],
          width: 150,
          avoidLabelOverlap: false,
          data: datab.map((item) => {
            return {
              value: item.g_count,
              name: item.label,
            }
          }),
        },
      ],
    })
  }
}
